<template>
    <div>
        <div style="text-align: center">
            <img src="/ui/images/book.jpg" style="width: 180px">
        </div>
        <div>
            <mt-index-list>
                <mt-index-section  :show-indicator="false">
                    <mt-cell :title="book.BookName">
                     <span style="color: #e60606;font-size: 22px">
                         <em style="font-size: 16px;font-style: normal">￥</em>{{book.price1}}</span>
                    </mt-cell>
                    <div style="color: gray;padding: 5px;">
                        7天无理由退款 - 正品保障 - 8年学习别人10年经验
                    </div>
                </mt-index-section>
                <mt-index-section  :show-indicator="false">
                    <template v-for="item in reviews">
                        <div>
                            <img class="star" :src="'/ui/images/' + item.score + '.png'"/>
                            <span class="grey">{{item.date}}</span>
                        </div>
                        <div>
                            <span>{{item.text}}</span>
                        </div>
                    </template>

                </mt-index-section>

                <mt-index-section  :show-indicator="false">
                    <div>
                        <span>评分: </span>
                        <select v-model="review.score">
                            <option v-for="index of 5">{{index}}}</option>
                        </select>
                    </div>
                    <div>
                        <mt-field label="短评" placeholder="输入短评"
                                  type="textarea" rows="4" v-model="review.text"></mt-field>
                    </div>
                    <div style="text-align: center">
                        <mt-button type="primary" @click="submitReview">提交</mt-button>
                    </div>
                </mt-index-section>
            </mt-index-list>
        </div>
    </div>

</template>
<script>
    module.exports={
        data() {
            return {
                book: {},
                review: {
                    uid: 101,
                    text: "",
                    score: 1
                },
                reviews: []
            }
        },
        async created() {
            const id = this.$route.params.id;
            const rsp = await  axios.get("/prods/" + id)
            const { status, result  } = rsp.data;
            if ( status === 'success') {
                this.book = result;
                this.loadReview(id)
            }
        },
        methods: {
            async loadReview(id){
                const rsp = await  axios.get("/review/" + id)
                const { status, result  } = rsp.data;
                if ( status === 'success') {
                    this.reviews = result
                }
            },
            async submitReview(){
                const id = this.$route.params.id;
                const rsp= await axios.post("/review/"+id, this.review);
                const {status,result } = rsp.data;
                if(status === "success"){
                    alert('提交成功')
                }else{
                    alert('您已经提交过')
                }
            }
        }
    }
</script>
<style>
    div{padding:5px;}
    .star{width:90px}
    .grey{color: gray}
</style>